<template>
    <div>
        <Modal width="800"
               v-model="modal.addModal"
               @on-ok="ok"
               @on-cancel="cancel"
               draggable
               scrollable
               :loading="loading"
               title="课程添加">
            <Row type="flex" justify="center">
                <Col span="6">
                    <Row type="flex" justify="center">
                        <div class="course_pic">
                            <img class="course_pic" :src="imgsrc">
                        </div>
                    </Row>
                    <br>
                    <Row type="flex" justify="center">
                        <Button @click="cropperFlag = true">上传封面</Button>
                    </Row>
                </Col>
                <Col span="18" class="mycourse">
                    <Form :label-width="90">
                        <FormItem v-if="IsAdmin" label="绑定教师">
                            <Select v-model="teacherId">
                                <Option v-for="index in teacherList" :key="index.teacherId" :value="index.teacherId">
                                    {{index.teacherName}}
                                </Option>
                            </Select>
                        </FormItem>
                        <FormItem label="课程名称">
                            <Input v-model="courseDo.courseName"/>
                        </FormItem>
                        <FormItem label="所属类型">
                            <Select v-model="selectOfCourseTypeId">
                                <OptionGroup v-for="index in parentList" :key="index.courseTypeId"
                                             :label="index.courseTypeName">
                                    <Option v-for="item in childrenList" v-if="index.courseTypeId==item.parentId"
                                            :key="item.courseTypeId" :value="item.courseTypeId">{{item.courseTypeName}}
                                    </Option>
                                </OptionGroup>
                            </Select>
                        </FormItem>
                        <FormItem label="课程编号">
                            <Input v-model="courseDo.courseNumber"/>
                        </FormItem>
                        <FormItem label="课程介绍">
                            <Input v-model="courseDo.courseIntroduce"/>
                        </FormItem>
                        <FormItem label="课程单价">
                            <Input type="number" v-model="courseDo.coursePrice"/>
                        </FormItem>
                       <FormItem label="培训类？">
                            <i-switch v-model="courseDo.isTrain">
                                <span slot="open">是</span>
                                <span slot="close">否</span>
                            </i-switch>
                        </FormItem>
                        <FormItem label="私有化？">
                            <i-switch>
                                <span slot="open">是</span>
                                <span slot="close">否</span>
                            </i-switch>
                        </FormItem>
                    </Form>
                </Col>
            </Row>
        </Modal>
        <modal-cropper :cropperFlag = "cropperFlag" @getfile="getfile"></modal-cropper>
    </div>
</template>

<script>
    import modalCropper from "@/components/cropper/modalCropper"
    export default {
        components:{modalCropper},
        data() {
            return {
                cropperFlag:false,
                imgsrc: null,
                loading: true,
                teacherId: null,
                parentList: [],
                childrenList: [],
                selectOfCourseTypeId: null,
                teacherList: [],
                courseDo: {
                    isTrain:false,
                    courseName: null,
                    courseNumber: null,
                    courseIntroduce: null,
                    coursePic: "c386b2b3-9e13-4500-b31b-62278315bc52",
                    coursePrice: 0
                }
            }
        },
        props: {
            modal: {
                addModal: false
            }
        },
        methods: {
            ok() {
                let data = {
                    "teacherId": this.teacherId,
                    'selectOfCourseTypeId': this.selectOfCourseTypeId,
                    'courseDo': this.courseDo
                }
                this.http.post("/mycourse/saveCourseAdd", this.qs.parse(data)).then(res => {
                    if (res.data) {
                        this.$Message.success("添加成功！")
                        this.$parent.getAllCourse()
                        this.modal.addModal = false
                    } else {
                        this.$Message.error("添加失败")
                        this.loading = false;
                        return;
                    }
                })
            },
            cancel() {
                this.modal.addModal = false
            },
            /**
             * 上传封面
             */
            getfile(file){
                let formData = new FormData();
                formData.append("file",file)
                this.http.post("/mycourse/uploadAvatar",formData,{headers:{'Content-Type':'multipart/form-data'}}).then(res=>{
                    if(res.data){
                        this.imgsrc = res.data.resourceUrl;
                        this.courseDo.coursePic = res.data.resourceId;
                    }
                })
            },

            /**
             * 获取全部角色为教师的人员
             */
            getAllRoleIsTeacher() {
                this.http.get("/mycourse/getAllRoleIsTeacher").then(res => {
                    this.teacherList = res.data
                })
            }
        },
        watch: {
            /**
             *利用'modal.addModal'变量值为true的情况下在里面进行初始化，防止父组件加载时候子组件也同时加载
             * @param val
             */
            'modal.addModal'(val) {
                if (val) {
                    this.getAllRoleIsTeacher()
                    this.http.get("/mycourse/getAllCourseType").then(res => {
                        if (res.data){
                            this.parentList = res.data.parentList
                            this.childrenList = res.data.childrenList
                        }
                    })
                }
            },
            cropperFlag(flag){
                this.modal.addModal = flag?false:true
            }
        },
        computed: {
            IsAdmin() {
                return this.$store.state.user.username == 'admin' ? true : false
            }
        }
    }
</script>

<style scoped>
    .mycourse {
        border-left: 1px solid;
    }

    .course_pic {
        width: 150px;
        height: 150px;
        border: 0px;
        border-radius: 75px;
    }
</style>
